<template>
	<view class="container">

		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="back-icon" @tap="goBack">
				<uni-icons type="left" size="20" color="#fff"></uni-icons>
			</view>
			<view class="title">已完成订单</view>
			<view class="right-icons">
				<uni-icons type="more-filled" size="20" color="#fff"></uni-icons>
			</view>
		</view>
		<view class="content-box">
			<!-- 订单信息 -->
			<view class="info-card white-box">
				<view class="card-header">
					<text class="section-title">订单信息</text>
					<text class="status" style="color: red;">{{orderInfo.status}}</text>
				</view>

				<view class="info-list">
					<view class="info-item">
						<text class="label">订单号：</text>
						<text class="value">{{orderInfo.orderNo}}</text>
					</view>
					<view class="info-item">
						<text class="label">服务项目：</text>
						<text class="value">{{orderInfo.serviceType}}</text>
					</view>
					<view class="info-item">
						<text class="label">服务门店：</text>
						<text class="value">{{orderInfo.storeName}}</text>

					</view>
					<view class="info-item">
						<text class="label">下单时间：</text>
						<text class="value">{{orderInfo.orderTime}}</text>
					</view>
					<view class="info-item">
						<text class="label">预约时间：</text>
						<text class="value">{{orderInfo.appointTime}}</text>
					</view>
					<view class="info-item">
						<text class="label">车辆：</text>
						<text class="value">{{orderInfo.carInfo}}</text>
					</view>
					<view class="info-item">
						<text class="label">备注：</text>
						<text class="value">{{orderInfo.remark}}</text>
					</view>
				</view>
			</view>

			<!-- 订单详情 -->
			<view class="info-card white-box">
				<text class="section-title">订单详情</text>
				<view class="price-list">
					<view class="price-item">
						<text>车辆精洗</text>
						<text>¥{{orderInfo.priceDetail.washing}}</text>
					</view>
					<view class="price-item">
						<text>车辆附加费用</text>
						<text>{{orderInfo.priceDetail.additional}}</text>
					</view>
					<view class="divider"></view>
					<view class="price-item">
						<text>原价</text>
						<text>¥{{orderInfo.priceDetail.original}}</text>
					</view>
					<view class="price-item discount">
						<text>店家优惠</text>
						<text style="color: red;">-¥{{orderInfo.priceDetail.storeDiscount}}</text>
					</view>
					<view class="price-item discount">
						<text>优惠券</text>
						<text style="color: red;">-¥{{orderInfo.priceDetail.coupon}}</text>
					</view>
					<view class="price-item total">
						<text>支付金额</text>
						<text>¥{{orderInfo.priceDetail.final}}</text>
					</view>
				</view>
			</view>

			<!-- 评价结果 -->
			<view class="info-card white-box">
				<text class="section-title">评价结果</text>
				<view class="rating-content">
					<view class="rating-time">评价时间：{{orderInfo.rating.time}}</view>
					<view class="rating-score">
						<text style="float: left;">评价结果：</text>
						<view class="stars" style="float: left;">
							<uni-icons v-for="n in orderInfo.rating.score" type="star-filled" color="#FFB800" :key="n"
								size="16"></uni-icons>
						</view>
					</view>
					<view class="rating-text" style="clear: both;">
						<text>评语：</text>
						<text>{{orderInfo.rating.comment}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		padding: var(--status-bar-height) 16px 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			color: #fff;
			font-size: 17px;
			font-weight: 500;
		}
	}

	.card-header,
	.section-title,
	.section-title {
		display: flex;
		justify-content: space-between;
		font-size: 35rpx;
		border-bottom: 3rpx solid gainsboro;
		padding-bottom: 4rpx;
	}

	.info-list,
	.rating-content {
		line-height: 60rpx;
	}

	.price-item {
		line-height: 60rpx;
		display: flex;
		justify-content: space-between;
	}
</style>

<script>
	export default {
		data() {
			return {
				orderInfo: {
					orderNo: '12121211248788',
					serviceType: '车辆保养',
					storeName: '大宝车辆维修店',
					orderTime: '2023-03-08 17:40',
					appointTime: '2023-03-09 17:40',
					carInfo: '奔驰FWE4/豫A98FHJ',
					remark: '',
					status: '已完成',
					priceDetail: {
						washing: 39.90,
						additional: 0,
						original: 59.90,
						storeDiscount: 20,
						coupon: 10,
						final: 29.9
					},
					rating: {
						time: '2023-04-10 11:09',
						score: 4,
						comment: '评语评语评语评语评语评语评语评语评语评语'
					}
				}
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>